$(function () {
  // ***********************加载用户列表
  $.ajax({
    type: 'GET',
    url: 'admin/users',
    data: {
      pagenum: 1,
      pagesize: 5
    },
    success: function (data) {
      // console.log(data);
      if (data.status === 0) {
        //渲染页面
        for (let i of data.data) {
          getList(i);
        }
      }
    }
  })

  //渲染页面
  function getList(data) {
    let str = `<tr>
    <td>${data.id}</td>
    <td>${data.username}</td>
    <td>${data.nickname}</td>
    <td>${data.email}</td>
    <td>
      <button type="button" class="layui-btn layui-btn-xs ">
        <a style="color: #fff" target="iframeArea" href="./edit.html?id=${data.id}">编辑</a>
      </button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-normal delete">重置密码</button>
    </td>
  </tr>`;
    $('tbody').append(str);
  }


  // ************************删除用户
  $('tbody').on('click', '.delete', function (e) {
    // 获取对应删除数据id值
    // 回到初始化渲染,删除和id绑定在一起
    // 自定义属性获取
    // 删除对应数据
    let tr = e.target.parentNode.parentNode
    let id = tr.firstElementChild.innerText
    $.ajax({
      url: 'admin/users/' + id,
      type: 'DELETE',
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          console.log(res);
          tr.remove()
        }
      }
    })

  })



  // ***********************重置密码的form表单
  let str = `<form id="repwd-form" class="layui-form" style="margin: 15px 30px 0 0">
      <!-- 第一行：密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
          <input type="text" name="password" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第二行：确认密码 -->
      <div class="layui-form-item">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-block">
          <input type="text" required lay-verify="required" placeholder="请重复输入新密码" autocomplete="off" class="layui-input">
        </div>
      </div>
      <!-- 第三行：按钮 -->
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>`;

    $('.delete').on('click', function () {
      layer.open({
        type: 1, // 页面层，弹窗内部设置一些页面结构 HTML结构！
        title: '重置密码', // 左上角显示标题
        area: ['500px', '250px'], // area区域：弹窗宽和高！
        content: str, // content:内容？弹窗的内容！HTML结构字符串！
              
        // 当弹窗弹出成功时调用这个函数：
        success: function (dom, index) {
          // dom 弹窗dom节点！
          // index:弹窗标识；
          // 提交事件： 弹窗成功后：在此函数内部可以获取 form表单元素
          //           addSub(index);
        }
      });
    });
    
    // 提交数据
    $('#repwd-form').on('submit', function (e) {
      e.preventDefault();
      // 获取输入的数据
      let data = form.val('pwd');
      $.ajax({
        url: '/admin/users/:id',
        type: 'PUT',
        data: data,
        success: function (res) {
          layer.msg(res.message);
          if (res.status == 0) {
            $('form')[0].reset();
          }
        }
      });
    });



})